<template>
    <div class="box1">
      <div>
        <Heaed
          title="订单结算"
          :left="true"
          :iconbool="false"
          @back="fun1"
        ></Heaed>
      </div>
      <img class="img1" src="../../img/首页/u19.png" alt="" />
      <div class="box">
        <OrderListContent></OrderListContent>
      </div>
      <div class="footer">
        <p class="p1"><span></span>&nbsp;&nbsp; 配送详情</p>
        <p class="p2">配送物流: <span>OMINI物流</span></p>
        <p class="p3">完成时间: <span>2019年8月12日10:25:21</span></p>
        <span class="xq" @click="fu">详情</span>
      </div>
      <div class="footer">
        <p class="p1"><span></span>&nbsp;&nbsp; 收货人详情</p>
        <p class="p2 p22">取货人: <span>OMINI.BASS</span></p>
        <p class="p3 p33">联系电话：<span>18801525595</span></p>
        <p class="p44">备注： <span>需要包装盒，谢谢！</span></p>
        
      </div>
    </div>
  </template>
  
  <script setup>
  import { useRouter } from "vue-router";
  // 引入头部
  import Heaed from "../../components/Hand.vue";
  // 引入头部内容
  import OrderListContent from "./Mycomponents/OrderListContent.vue";
  const router = useRouter();
  const fun1 = () => {
    router.go(-1);
  };
  const fu = () =>{
  router.push("/Delivery")
}
  </script>
  
  <style lang="less" scoped>
  .img1{
    position: relative;
    top: -60px;
  }
  .box1 {
    width: 100vw;
    height: 100vh;
    background-color: #ecfdfa;
    overflow: auto;
    position: relative;
  }
  .box {
    background-color: #fff;
    position: absolute;
    top: 37px;
    left: 2px;
  }
  .footer {
    width: 90vw;
    margin: 0 auto;
    border-radius: 20px;
    background-color: #fff;
    position: relative;
    top: 0px;
    font-weight: 600;
    text-indent: 30px;
    .p1{
      margin: 10px 0px;    
      span{
          width: 1vw;
          height: 3vh;
          background-color: red;
          display: inline-block;
          border-radius: 2px;
          position: relative;
          top: 4px;
          
      }
    }
    .p2{
      margin:20px 0px;
      span{
          font-weight: 200;
          font-size: 12px;
          margin-left: 20px;
      }
    }
    .p22{
      span{
          margin-left: 35px;
      }
    }
    .p3{
      span{
          font-weight: 200;
          font-size: 12px;
          margin-left: 20px;
          
      }
    }
    .p33{
      margin-bottom: 10px;
      span{
          margin-left: 12px;
      }
    }
  }
  .xq{
      font-size: 12px;
      font-weight: 200;
      color: #CCCCCC;
      position: relative;
      right: -77.667vw;
      top: -19px;
  }
  .p44{
      margin: 10px 0px;
      padding-bottom: 10px;
      span{
          font-size: 12px;
          font-weight: 200;
          margin-left: 40px;
          
      }
  }
  </style>
  